<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gallery</title>
    <link rel="stylesheet" href="style.css">
    <script src="./data.js"></script>
</head>
<body style="overflow-y: scroll">
    <main id="root">
        <header>
            <h1>Gallery</h1>
            <p>columns {{column}}, width {{ww}}</p>
        </header>
        <section>
            <article class="box" id="box" style="margin-right: -10px">
                <figure v-for="item in list" :key="item.id"
                        :style="{
                          width: item._width + 'px',
                          height: item._height + 'px',
                          paddingRight: gap + 'px',
                          paddingBottom: gap + 'px',
                        }">
                  <img v-if="item.equalh_url" :src="'http:'+ item.equalh_url" @error="item.equalh_url = ''">
                </figure>
            </article>
        </section>
    </main>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="core_h.js"></script>
    <script>
    new Vue({
        data: {
            rlist: data.list,
            list: [],
            column: 4,
            ww: 0,
            gap: 7,

            h: 230
        },
        mounted: function() {
            window.addEventListener('resize', this.init.bind(this));
            this.init();
        },
        methods: {
            init: function () {
                this.ww = document.getElementById('box').clientWidth;
                this.column = this.ww/320 >> 0 || 1;
                // this.list = Gallery(this.rlist, this.ww, this.column, this.gap);
                this.list = Gallery_H(this.rlist, this.ww, this.h, this.gap);
            }
        }
    }).$mount('#root');
    </script>
</body>
</html>
